<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>VUE表单-修饰符</title>
        <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            关键词【即时版】：<input v-model="keyWord1"/><br/>
            <span>{{keyWord1}}</span><br/>
            关键词【延迟版】：<input v-model.lazy="keyWord2"/><br/>
            <span>{{keyWord2}}</span><br/>
            ----------------------------------------<br/>
            关键词【+10操作】：<input v-model="keyWord3" type="number"/><br/>
            <span>{{keyWord3 + 10}}</span><br/>
            关键词【+10操作[带number修饰符]】：<input v-model.number="keyWord4" type="number"/><br/>
            <span>{{keyWord4 + 10}}</span><br/>
            ----------------------------------------<br/>
            关键词【普通输入框】：<input v-model="keyWord5"/><br/>
            <span>{{keyWord5}}</span><br/>
            关键词【去空格输入框】：<input v-model.trim="keyWord6"/><br/>
            <span>{{keyWord6}}</span><br/>

        </div>
    </body>
    <script type="text/javascript">
        var vueObj = new Vue({
            el: '#app',
            data: {
                keyWord1: "",
                keyWord2: "",
                keyWord3: "",
                keyWord4: "",
                keyWord5: "",
                keyWord6: ""
            }
        });
    </script>
</html>